//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//加载自己的样式
require('./play.less')

//引入封装的dom
require('../../assets/js/dom.js')

//复用的basic
require('../../assets/css/basic.less')

//引入fonts字体图标
require('../../assets/fonts/iconfont.css')

//获取axios工具函数
const request = require('../../utils/request')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

function getMsg() {
    //如果错误显示信息提示框
    msg.style.display = 'block';

    // 计时器，1秒之后隐藏信息提示框
    setTimeout(() => {
        msg.style.display = 'none';
    }, 1000);
}

//等待dom加载完毕之后操作dom
document.ready(() => {
    //获取dom
    const player = document.querySelector('#player');
    const curIndex = document.querySelector('#curIndex');
    const totalLength = document.querySelector('#totalLength');
    const title = document.querySelector('#title');
    const pre = document.querySelector('#pre');
    const pause = document.querySelector('#pause');
    const relay = document.querySelector('#relay');
    const next = document.querySelector('#next');
    const msg = document.querySelector('#msg');
    const progress = document.querySelector('#progress');
    const img = document.querySelector('#img');
    const titText = document.querySelector('#titText');
    const continue1 = document.querySelector('#continue');
    const popup = document.querySelector('#popup');
    const end = document.querySelector('#end');

    //获取本地数据
    const fragments = JSON.parse(localStorage.getItem('fragments'));

    //设置变量存储视频索引
    let index = 0;
    //设置变量存储视频总个数
    let length = fragments.length;
    //保存所有运动的时间
    let timeArr = [];
    //记录当前事情
    let time = 0;

    //封装播放函数
    function play() {
        //给视频src赋值
        player.src = API + fragments[index].videoUrl;
        // 蒙层图片
        img.src = API + fragments[index].imgUrl;
        //信息赋值
        curIndex.textContent = index + 1;
        totalLength.textContent = length;
        title.textContent = fragments[index].title;
        titText.textContent = fragments[index].title;

        //事件注册 播放事件
        player.addEventListener('canplay', () => {
            //播放
            player.play();
        })
    }
    //调用函数
    play();

    //下一条
    next.addEventListener('click', () => {
        //判断不能超过视频总条数
        if (index < length - 1) {
            //index++
            index++;
            //播放下一条视频
            play();
            //把上次记录的时间 存进数组
            timeArr.push(time);
            console.log('timeArr :>> ', timeArr);
        } else {
            getMsg();
            msg.innerHTML = '已无视频可播放';
        }
    })

    //上一条
    pre.addEventListener('click', () => {
        //判断不能超过视频总条数
        if (index > 0) {
            //index--
            index--;
            //播放上一条视频
            play();
            //把上次记录的时间 存进数组
            timeArr.push(time);
            console.log('timeArr :>> ', timeArr);
        } else {
            getMsg();
            msg.innerHTML = '已无视频可播放';
        }
    })

    //暂停
    pause.addEventListener('click', () => {
        //显示播放按钮 隐藏暂停按钮
        relay.style.display = 'block';
        pause.style.display = 'none';
        //弹窗弹出
        popup.style.display = 'block';
        //暂停
        player.pause()
    })

    //播放
    relay.addEventListener('click', () => {
        //隐藏播放按钮 显示暂停按钮
        pause.style.display = 'block';
        relay.style.display = 'none';
        //暂停
        player.play()
    })

    //进度条
    player.addEventListener('timeupdate', () => {
        progress.style.width = (player.currentTime / player.duration) * 100 + '%';
        //把当前时间记录在time里面
        time = player.currentTime;
    })

    //监听结束事件
    player.addEventListener('ended', () => {
        //判断不能超过视频总条数
        if (index < length - 1) {
            //index++
            index++;
            //播放下一条视频
            play();
            //把当前时间push进去
            timeArr.push(time);
            console.log('timeArr :>> ', timeArr);
        } else {
            //弹窗隐藏
            popup.style.display = 'block';
            //显示播放按钮 隐藏暂停按钮
            relay.style.display = 'block';
            pause.style.display = 'none';
        }
    })

    //点击继续
    continue1.addEventListener('click', () => {
        //弹窗隐藏
        popup.style.display = 'none';
        //继续播放
        relay.click()
    })

    //点击结束
    end.addEventListener('click', () => {
        //把运动数据发送请求 保存到数据库
        timeArr.push(player.currentTime);

        //计算总时长
        let sum = timeArr.reduce((total, cur) => {
            return total + cur;
        }, 0)

        //发送请求
        request.post('/api/exercise/save', {
            type: 2,
            duration: sum,
            calorie: sum * 1000,
        }).then(res => {
            if (res.data.errno === 0) {
                //跳转到课程页面
                location.href = './course.html';
            }
        })
    })
})